<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div class="all">
        <p class="p1">这是一个p标签</p>
        <p>这是一个p标签</p>
        <p class="delete">这是一个p标签</p>
        <p>这是一个p标签</p>

    </div>
</body>
<script>
    let element=document.createElement('h3')
    element.innerHTML="这是一个h3节点"
    let div=document.querySelector('div')
    div.appendChild(element)//插入到div的最后一个孩子的后面并且作为div的孩子

    let newnode=document.createElement('p')
    newnode.innerHTML="这是一个新p标签"
    // div.insertBefore(newnode,document.querySelector('.p1'))//插入到div的孩子中的p1前边
    div.insertBefore(newnode,null)//等价于div.appendChild(newnode)
    newnode.innerHTML="这是修改后的p标签"


    //注意事项：1.多次插入一个对象只能视为移动 2.插入后再修改原对象页面会修改


    let parent=document.querySelector('.all')
    let child=document.querySelector('.delete')
    parent.removeChild(child)//删除节点
    parent.insertBefore(child,element)//可以继续插入



</script>
</html>